<!--  -->
<template>
  <div class=''>
    <div class="seasBox">
      <div class="leftSeasBox">
        <div :class="[item.checked ? 'checkSeasItemBox' : 'seasItemBox']" v-for="(item,index) in userListArr" :key="index" >
          <div @click="changeSeasId(item.id,index)">
            <span style="font-weight: 600;">用户：</span>{{ item.nickName }}
          </div>
          <div>
            <!-- <i class="el-icon-s-tools"></i> -->
          </div>
        </div>
      </div>
      <div class="rightSeasBox">
        <el-form ref="userCusArr" :inline="true" size="small" :model="userCusArr" class="demo-form-inline">
          <el-form-item label="关键字查询" prop="kw">
            <el-input v-model="userCusArr.kw" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="数据来源" prop="clientId">
            <el-select v-model="userCusArr.clientId" placeholder="请选择状态">
              <el-option
              v-for="(item,index) in mesFromArr"
              :key="index"
              :label="item.tName"
              :value="item.tId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否重要客户" prop="isFlag">
            <el-select v-model="userCusArr.isFlag" placeholder="请选择状态">
              <el-option
              v-for="(item,index) in isFlagArr"
              :key="index"
              :label="item.name"
              :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="userCusArr.value_seas"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="queryUserCusList"
              class="queryButton"
              icon="el-icon-search">查询</el-button>
            <el-button
              class="resetButton"
              @click="resetUserList('userCusArr')"
              icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
        <div style="display: flex;">
            <el-button
              type="success"
              @click="recycleCus('all')"
              class="queryButton"
              v-permissions="'customers:recycle'"
              plain
              style="margin-right: 5px;">批量回收</el-button>
            <el-button
              type="warning"
              @click="deleteBtnAll"
              icon="el-icon-delete"
              class="queryButton"
              v-permissions="'customers:delete'"
              plain
              style="margin-left: 5px;">批量删除客户</el-button>
            <el-button type="primary" class="queryButton" @click="shareFun" plain>分配</el-button>
        </div>
        <!-- 表格 -->
        <el-table
          ref="tableRefs"
          :data="userCusListUser"
          :header-cell-style="{ background:'#f8f8f9',color:'#515a6e'}"
          size="mini"
          @sort-change="changeTableSort"
          style="width: 100%; margin-top: 5px;"
          @select="selectOptions"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            label="昵称"
            width="90">
            <template slot-scope="scope">
              <span>
                <span v-show="scope.row.isRepeat" class="repeatBtn">重复</span>{{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="clientName"
            width="90"
            :show-overflow-tooltip="true"
            label="来源名称"
          >
          </el-table-column>
          <el-table-column
            prop="quota"
            width="90"
            :show-overflow-tooltip="true"
            label="额度">
            <template slot-scope="scope">
              <span>{{ scope.row.quota === null ? '-' : scope.row.quota }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isFlag"
            width="90"
            label="是否重要">
            <template slot-scope="scope">
              <div
                style="font-size: 30px"
                @click="changeFlag(scope.row.id)"
              >
                <i class="el-icon-star-off" v-if="scope.row.isFlag === 0"></i>
                <i class="el-icon-star-on" v-else></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="seasName"
            label="公海名称"
            width="90">
          </el-table-column>
          <el-table-column prop="newTime" label="跟进时间" width="120" sortable>
            <template slot-scope="scope">
              <span>{{
                scope.row.newTime === null ? "-" : timestampToDate(scope.row.newTime)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="newTime" label="跟进记录" width="120">
            <template slot-scope="scope">
              <span>{{
                scope.row.newRecord === null ? "-" : scope.row.newRecord
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="客户备注"
            width="150">
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-permissions="'customer:detail'"
                @click="getFlagDetail(scope.row,scope.$index)"
              >详情</el-button>
              <el-button
                type="text"
                @click="recycleCus('one',scope.row)"
                size="mini"
                v-permissions="'customers:recycle'">回收客户</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-permissions="'customers:delete'"
                @click="deletBtn(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          class="pagination_container"
          :total="paginationForOut.total"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page.sync="paginationForOut.page"
          :limit.sync="paginationForOut.pageSize"
          @pagination="queryUserCusList"
        />
      </div>
    </div>
    
    <!-- 用户列表弹框 -->
    <el-dialog
      title="用户列表"
      :visible.sync="isShowUserList"
      @close="isShowUserList = false"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form
        ref="formInSeas"
        :inline="true"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="用户">
          <el-select
            v-model="checkedUserId"
            filterable
            placeholder="请选择用户"
          >
            <el-option
              v-for="item in userListArr"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            @click="submitUser"
            class="queryButton"
            >确定</el-button
          >
          <el-button
            plain
            class="resetButton"
            @click="isShowUserList = false"
            >关闭</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 详情公海客户弹框 -->
    <el-drawer
      title="客户详情"
      :visible.sync="showFlagDetailDia"
      :direction="direction"
      size="85%"
      @click="closeDiaSeasDetai">
      <el-form ref="basicForm"
        :inline="false"
        size="small"
        class="demo-form-inline"
        :model="flagDetailObj"
        label-position="left"
        label-width="220px">
        <div class="filter-container">
          <div class="innerBigBox">
            <div class="innerSty">
              <div class="outBox">
                <div class="templeateBox">
                  <div class="innerPhone">
                    <span style="font-weight: 600;">姓名：</span>
                    <el-tooltip class="item" effect="dark" :content="flagDetailObj.name" placement="top-start">
                      <span>{{ flagDetailObj.name }}</span>
                    </el-tooltip>
                  </div>
                  <div class="innerPhone">
                    <span style="font-weight: 600;">电话：</span>
                    <el-tooltip class="item" effect="dark" :content="flagDetailObj.phone" placement="top-start">
                      <span>{{ flagDetailObj.phone }}</span>
                    </el-tooltip>
                    <!-- <i class="el-icon-phone-outline" @click="callUserPhone(flagDetailObj.id)"></i> -->
                  </div>
                  <div class="innerPhone_selet">
                    <span style="font-weight: 600;">状态：</span>
                    <el-select v-model="flagDetailObj.status" placeholder="请选择客户状态">
                      <el-option
                      v-for="(item,index) in flagStatusArr"
                      :key="index"
                      :label="item.name"
                      :value="item.id"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="templeateBox">
                  <div class="innerName">
                    <span style="font-weight: 600;">跟进时间：</span>{{ flagDetailObj.newTime === null ? '-' : timestampToDate(flagDetailObj.newTime) }}
                  </div>
                </div>
              </div>
              <div class="innerBottonGroups">
                <div @click="goLastPage">
                  上一条
                </div>
                <div @click="goNextPage">
                  下一条
                </div>
              </div>
            </div>
            <div class="userRemark">
              <div class="remarkTitle">
                <div style="font-weight: 600;">
                  客户备注
                </div>
                <!-- <div @click="commitUserfo">
                  保存
                </div> -->
              </div>
              <el-input type="textarea" v-model="flagDetailObj.remarks" clearable placeholder="车 + 房 + 五险一金"></el-input>
            </div>
            <div class="userRemark">
              <div class="remarkTitle">
                <div style="font-weight: 600;">
                  跟进记录
                </div>
                <!-- <div @click="commitUserfo">
                  保存
                </div> -->
              </div>
              <el-input type="textarea" @input="forceUpdate" v-model="flagDetailObj.followUpRecord" clearable></el-input>
              <!-- <div class="beforeWords">
                <div v-for="item in beforeWords" :key="item.id" @click="changeFollow(item.name)">
                  {{ item.name }}
                </div>
              </div> -->
            </div>
          </div>
          <div class="followRecode">
            <div class="titleFo">历史跟进记录</div>
            <div class="outSideBox">
              <div class="contentFo" v-for="item in recordsRop" :key="item.id" v-show="recordsRop.length > 0">
                <div class="timeBox">
                  <span style="font-weight: 400;">创建时间：</span>{{ timestampToDate(item.createTime) }}
                </div>
                <div class="messageBox">
                {{ item.userNickName }} : {{item.records}}
                </div>
              </div>
            </div>
            <div class="contentFo" v-show="recordsRop.length == 0">
              <el-empty description="暂无"></el-empty>
            </div>
          </div>
          <div class="bottomBtns">
            <!-- <div style="font-size: 30px;" @click="changeFlag(flagDetailObj.id)">
              <i class="el-icon-star-off"></i>
            </div> -->
            <div @click="recycleCus('one',flagDetailObj)">
              移入公海
            </div>
          </div>
        </div>
      </el-form>
    </el-drawer>


    <!-- <el-dialog
      title="客户详情"
      :visible.sync="showFlagDetailDia"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      @click="closeDiaSeasDetai"
      width="40%">
      <el-form ref="basicForm"
        :inline="false"
        size="small"
        class="demo-form-inline"
        :model="flagDetailObj"
        label-position="left"
        label-width="220px">
        <el-form-item label="客户名称">
          <el-input :disabled="isdisable" v-model="flagDetailObj.name"></el-input>
        </el-form-item>
        <el-form-item label="客户电话">
          <el-input :disabled="isdisable" v-model="flagDetailObj.phone"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :disabled="isdisable" type="textarea" v-model="flagDetailObj.remarks"></el-input>
        </el-form-item>
        <el-form-item label="客户来源">
            <span>{{ flagDetailObj.clientName === null ? '-' : flagDetailObj.clientName }}</span>
        </el-form-item>
        <el-form-item label="公海名称">
          {{ flagDetailObj.seasName }}
        </el-form-item>
        <el-form-item label="跟进人">
          <span>{{ flagDetailObj.followUpUser }}</span>
        </el-form-item>
        <el-form-item label="是否为重要客户">
          <span>{{ flagDetailObj.isFlag === 1 ? '是' : '否' }}</span>
        </el-form-item>
        <el-form-item label="客户状态">
          <el-select :disabled="isdisable" v-model="flagDetailObj.status" placeholder="请选择客户状态">
              <el-option
              v-for="(item,index) in flagStatusArr"
              :key="index"
              :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="星级">
          <el-select :disabled="isdisable" v-model="flagDetailObj.level" placeholder="请选择星级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ flagDetailObj.createTime === null ? '-' : timestampToDate(flagDetailObj.createTime) }}</span>
        </el-form-item>
        <el-form-item label="最新掉入公海时间">
          <span>{{ flagDetailObj.newDropTime === null ? '-' : timestampToDate(flagDetailObj.newDropTime) }}</span>
        </el-form-item>
        <el-form-item label="最新分配时间">
          <span>{{ flagDetailObj.newShareTime === null ? '-' : timestampToDate(flagDetailObj.newShareTime) }}</span>
        </el-form-item>
        <el-form-item label="最新跟进时间">
          <span>{{ flagDetailObj.newTime === null ? '-' : timestampToDate(flagDetailObj.newTime) }}</span>
        </el-form-item>
        <el-form-item label="更新时间">
          <span>{{ flagDetailObj.updateTime === null ? '-' : timestampToDate(flagDetailObj.updateTime) }}</span>
        </el-form-item>
        <el-form-item label="最新跟进记录">
          <el-input :disabled="isdisable" v-model="flagDetailObj.newRecord" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="贷款额度">
          <el-input :disabled="isdisable" v-model="flagDetailObj.quota"></el-input>
        </el-form-item>
        <el-form-item label="查看跟进记录">
          <el-button
            type="primary"
            class="submitButton"
            @click="viewRecords(flagDetailObj.id)">点击查看</el-button>
        </el-form-item>
      </el-form>
      <el-form class="buttons">
        <el-button
          class="resetButton"
          @click="closeDiaSeasDetai">关闭</el-button>
      </el-form>
    </el-dialog> -->
    <!-- 跟进记录 -->
    <!-- <el-dialog
      title="跟进记录"
      :visible.sync="isShowRecords"
      @close="isShowRecords = false"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="25%">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item :title="item.userNickName+'-'+timestampToDate(item.createTime)" :name="item.id" v-for="item in recordsRop" :key="item.id">
          <div>{{item.records}}</div>
        </el-collapse-item>
      </el-collapse>
      <div style="width: 100%; text-align: center;">
        <el-button
          plain
          class="resetButton"
          @click="isShowRecords = false">关闭</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { userList } from '@/request/departmentUser';
import { customersUserCus,customersFollowUpRecord,customersRecycle } from '@/request/userCus';
import { customersShareCus } from '@/request/seas';
import { timestampToDate } from '@/until/paramRou'
import { thirdClientList } from '@/request/thirdClientList';
import { customersBatchDelete,customersDelete, customersSetFlag } from '@/request/myCus';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        isShowUserList: false,
        checkedUserId: null,
        nowIndex: '',
        beforeWords: [
          {
            name: '不需要',
            id: 1
          },
          {
            name: '空号',
            id: 2
          },
          {
            name: '关机',
            id: 3
          },
          {
            name: '正忙',
            id: 4
          },
          {
            name: '已加微信',
            id: 5
          },
          {
            name: '拒接',
            id: 6
          }
        ],
        direction: 'rtl',
        recordsRop: [],
        activeName: '',
        // 用户客户详情
        isShowRecords: false,
        isdisable: true,
        showFlagDetailDia: false,
        flagDetailObj: {},
        userCusListUser: [],
        userListArr: [],
        flagStatusArr: [
          {
            name: '待跟进',
            id: 0
          },
          {
            name: '己成交',
            id: 1
          },
          {
            name: '在考虑',
            id: 2
          },
          {
            name: '己邀约待上门',
            id: 3
          },
          {
            name: '己沟通不需要',
            id: 4
          },
          {
            name: '己上门待签约',
            id: 5
          },
          {
            name: '己上门资质不服',
            id: 6
          },
          {
            name: '签约',
            id: 7
          },
          {
            name: '进件',
            id: 8
          },
          {
            name: '成交',
            id: 9
          },
        ],
        isFlagArr: [
          {
            name: '是',
            id: 1
          },
          {
            name: '否',
            id: 0
          }
        ],
        userCusArr: {
          clientId: '',
          value_seas: [],
          followUserId: '',
          isFlag: ''
        },
        paginationForOut: {
          page: 1,
          pageSize: 10,
          total: 0
        },
        recycleArr: [],
        mesFromArr: [],
        orderBy: ''
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

    // 标记重要客户
    
    // 改变我的客户flag
    changeFlag(val, itemB) {
      customersSetFlag({ cusId: val })
        .then((res) => {
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "标记成功",
            });
            this.queryUserCusList()
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },


    // 时间顺序切换
    changeTableSort(column){
      var sortingType = column.order;
      this.orderBy = sortingType === 'ascending' ? 'c.new_time asc' : sortingType === 'descending' ? 'c.new_time desc' : '';
      this.queryUserCusList()
    },

    submitUser(){
      // console.log(this.checkedUserId);
      let arr = [];
      for (const element of this.recycleArr) {
        arr.push(element.id);
      }
      let shareCus = {};
      shareCus.cusIdList = arr;
      shareCus.userId = this.checkedUserId;

      customersShareCus(shareCus)
        .then((res) => {
          if (res.code === "200") {
            this.queryUserCusList()
            this.isShowUserList = false;
            this.$message({
              type: "success",
              message: "分配成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 分配
    shareFun() {
      if (this.recycleArr.length === 0) {
        this.$message({
          type: 'error',
          message: '请至少选择一位用户'
        })
      } else {
        this.isShowUserList = true;
      }
    },
    getNowNeedFun(val){
      customersFollowUpRecord({ cusId: val })
        .then((res) => {
          if (res.code === "200") {
            this.recordsRop = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 我的客户详情
    getFlagDetail (b,c) {
      this.flagDetailObj = b
      this.nowIndex = c
      this.viewRecords(b.id)
    },
    // 下一页
    async goNextPage(){
      let changeindex = this.nowIndex + 1
      let isRight = this.paginationForOut.page - 1
      let isTo = (isRight * this.paginationForOut.pageSize) + (changeindex+1)
      if (isTo <= this.paginationForOut.total) {
        if (changeindex < this.paginationForOut.pageSize) {
          this.getFlagDetail(this.userCusListUser[changeindex],changeindex)
        } else {
          this.paginationForOut.page++
          await this.queryUserCusList()
          this.nowIndex = 0
          changeindex = 0
          this.getFlagDetail(this.userCusListUser[changeindex],changeindex)
        }
      } else {
        return
      }
      
    },
    // 上一页
    async goLastPage(){
      let changeindex = this.nowIndex - 1
      let isRight = this.paginationForOut.page - 1
      let isTo = (isRight * this.paginationForOut.pageSize) + (changeindex+1)
      if (isTo > 0) {
        if (changeindex >= 0) {
          this.getFlagDetail(this.userCusListUser[changeindex],changeindex)
        } else {
          this.paginationForOut.page--
          await this.queryUserCusList()
          this.nowIndex = this.paginationForOut.pageSize - 1
          changeindex = this.paginationForOut.pageSize - 1
          this.getFlagDetail(this.userCusListUser[changeindex],changeindex)
        }
      } else {
        return
      }
      
    },
    forceUpdate(){
      this.$forceUpdate()
    },
    // 
    changeFollow(val){
      this.flagDetailObj.followUpRecord = val
      this.$forceUpdate()
    },
    // 跟进记录
    commitUserfo(){
      const objUpdate = {
        addType: 1,
        cusId: this.flagDetailObj.id,
        cusName: this.flagDetailObj.name,
        followUpRecord: this.flagDetailObj.followUpRecord,
        level: this.flagDetailObj.level,
        phone: this.flagDetailObj.phone,
        quota: this.flagDetailObj.quota,
        remarks: this.flagDetailObj.remarks,
        seasId: this.flagDetailObj.seasId,
        status: this.flagDetailObj.status
      }
      customersUpdateQualificationsByUser(objUpdate).then(res => {
        this.queryUserCusList()
        if (res.code === '200') {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getNowNeedFun(objUpdate.cusId)
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    // 重置
    resetUserList(fromName){
      // this.resetForm(fromName)
      this.$refs[fromName].resetFields();
      this.getUserList()
    },
    // 删除我的客户
    deletBtn(val){
      this.$confirm(`是否确认删除’${val.name}‘`, '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        showCancelButton: '取消',
        distinguishCancelAndClose: false
      }).then(() => {
        let arr = []
        arr.push(val.id)
        let deleteCus = {}
        deleteCus.cusIdList = arr
        customersDelete(deleteCus).then(res => {
          if(res.code === '200') {
            this.queryUserCusList()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
            return
          }
        }).catch(err => {
          this.$message({
            message: '服务器忙~',
            type: 'warning'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
    },
    // 批量删除客户
    deleteBtnAll(){
      if (this.recycleArr.length === 0) {
        this.$message({
          type: 'error',
          message: '请至少选择一位用户'
        })
      } else {
        this.$confirm(`是否确认删除`, '提示', {
          type: 'warning',
          cancelButtonText: '取消',
          showCancelButton: true,
          confirmButtonText: '确定',
          distinguishCancelAndClose: false
        }).then(() => {
          let arr = []
          for (const element of this.recycleArr) {
            arr.push(element.id)
          }
          let deleteCus = {}
          deleteCus.cusIdList = arr
          customersBatchDelete(deleteCus).then(res => {
            if(res.code === '200') {
              this.queryUserCusList()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
              return
            }
          }).catch(err => {
            this.$message({
              message: '服务器忙~',
              type: 'warning'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消!'
          })
        })
      }
    },
    // 获取数据来源列表
    getMesFromList(){
      let obj = {
        limit: 99999,
        page: 1
      }
      thirdClientList(obj).then(res => {
        if (res.code === '200') {
          this.mesFromArr = res.data.records
        } else {
          this.mesFromArr = []
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    // 回收客户
    recycleCus(val, item){
      if (val === 'one') {
        let allCusArr = []
        allCusArr.push(item.id)
        let shareCus = {}
        shareCus.cusIdList = allCusArr;
        shareCus.userId = this.userCusArr.followUserId;
        customersRecycle(shareCus).then(res => {
          if (res.code === '200') {
            this.queryUserCusList()
          
            let changeindex = this.nowIndex + 1
            let isRight = this.paginationForOut.page - 1
            let isTo = (isRight * this.paginationForOut.pageSize) + (changeindex)
            if (this.userCusListUser.length === 1 || isTo >= this.paginationForOut.total) {
              this.showFlagDetailDia = false
            } else {
              this.goNextPage()
            }
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        }).catch(err => {
          this.$message({
            message: '服务器忙~',
            type: 'warning'
          })
        })
      }
      if (val === 'all') {
        if (this.recycleArr.length === 0) {
          this.$message({
            type: 'error',
            message: '请至少选择一位客户'
          })
        } else {
          let allCusArr = []
          for (const element of this.recycleArr) {
            allCusArr.push(element.id)
          }
          let shareCus = {}
          shareCus.cusIdList = allCusArr;
          shareCus.userId = this.userCusArr.followUserId;
          customersRecycle(shareCus).then(res => {
            if (res.code === '200') {
            this.queryUserCusList()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          }).catch(err => {
            this.$message({
              message: '服务器忙~',
              type: 'warning'
            })
          })
         }
      }
    },
    // 表格全选
    handleSelectionChange(val) {
      this.recycleArr = val;
    },
    // 单选
    selectOptions(val){
      this.recycleArr = val
    },
    // 公海客户详情
    // getFlagDetail (val) {
    //   this.showFlagDetailDia = true
    //   this.flagDetailObj = val
    // },
    // 关闭弹框
    closeDiaSeasDetai(){
      this.showFlagDetailDia = false
      this.queryUserCusList()
    },
    // 查看详情跟进记录
    viewRecords(val){
      customersFollowUpRecord({cusId :val}).then(res => {
        if (res.code === '200') {
          this.showFlagDetailDia = true
          this.recordsRop = res.data
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
          this.$message({
            message: '服务器忙~',
            type: 'warning'
          })
        })
    },
    // 切换用户
    changeSeasId(id,index){
      for (const element of this.userListArr) {
        element.checked = false
      }
      this.userListArr[index].checked = true
      this.userCusArr.followUserId = id
      this.queryUserCusList()
    },
    // 获取用户列表
    getUserList(){
      const userObj = {
        limit: 99999,
        page: 1
      }
      userList(userObj).then(res => {
        if (res.code === '200') {
          for (const element of res.data.records) {
            element.checked = false
          }
          res.data.records[0].checked = true
          this.userListArr = res.data.records || []
          this.changeSeasId(this.userListArr[0].id,0)
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    // 获取用户客户列表
    async queryUserCusList(){
      let objUserCus = {}
      if (this.userCusArr.value_seas === null) {
        objUserCus = {
          clientId: this.userCusArr.clientId,
          isFlag: this.userCusArr.isFlag,
          kw: this.userCusArr.kw,
          seasId: this.userCusArr.seasId,
          page: this.paginationForOut.page,
          limit: this.paginationForOut.pageSize,
          followUserId: this.userCusArr.followUserId,
          startTime: '',
          endTime: ''
        }
      } else {
        objUserCus = {
          clientId: this.userCusArr.clientId,
          isFlag: this.userCusArr.isFlag,
          kw: this.userCusArr.kw,
          seasId: this.userCusArr.seasId,
          page: this.paginationForOut.page,
          limit: this.paginationForOut.pageSize,
          followUserId: this.userCusArr.followUserId,
          startTime: timestampToDate(this.userCusArr.value_seas[0]) === 'NaN-aN-aN' ? '' : timestampToDate(this.userCusArr.value_seas[0]),
          endTime: timestampToDate(this.userCusArr.value_seas[1]) === 'NaN-aN-aN' ? '' : timestampToDate(this.userCusArr.value_seas[1]),
        }
      }
      await customersUserCus(objUserCus).then(res => {
        // console.log(res);
        if(res.code === '200') {
          this.userCusListUser = res.data.records
          if (res.data.total > 0 && Math.ceil(res.data.total / this.paginationForOut.size) < this.paginationForOut.page) {
            this.paginationForOut.page = Math.ceil(res.data.total / this.paginationForOut.size)
            this.getCompanyListFun()
          } else {
            this.paginationForOut.total = res.data.total
          }
        } else {
          this.userCusListUser = []
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
        
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getUserList()
    this.getMesFromList()
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.seasBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.seasItemBox {
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 5px 5%;
  background: #fff;
  color: #000;
  margin: 3px 0 6px 0;
  box-shadow: -8px 0 15px -5px rgba(0,0,0,0.2), 
            -4px 0 6px -2px rgba(255,255,255,0.3);
  :nth-child(1) {
    width: 90%;
  }
  :nth-child(2) {
    width: 10%;
  }
}
.checkSeasItemBox {
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 5px 5%;
  background: #2c2c2c;
  color: #fff;
  margin: 3px 0 6px 0;
  box-shadow: -8px 0 15px -5px rgba(0,0,0,0.2), 
            -4px 0 6px -2px rgba(255,255,255,0.3);
  :nth-child(1) {
    width: 90%;
  }
  :nth-child(2) {
    width: 10%;
  }
}
.leftSeasBox {
  width: 25%;
  height: 100%;
}
.rightSeasBox {
  width: 75%;
  margin-left: 2px;
  padding: 5px 2px;
  box-shadow: -8px 0 15px -5px rgba(0,0,0,0.2), 
            -4px 0 6px -2px rgba(255,255,255,0.3);
  min-height: 100%;  
}
.buttons {
  width: 100%;
  text-align: center;
}

.user-item {
  margin: 8px 0;
  padding: 8px;
  transition: background-color 0.3s;
}
.user-item:hover {
  background-color: #f5f7fa;
}
.filter-container {
  padding: 10px 1%;
  width: 98%;
  min-height: 80vh;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  position: relative;
  .innerBigBox {
    padding: 5px;
    width: 69%;
    height: auto;
    .innerSty {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .outBox {
        width: 85%;
        .templeateBox {
          height: 40px;
          line-height: 40px;
          display: flex;
          .innerPhone {
            width: 30%;
            display: flex;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            div {
              width: 50px !important;
              font-weight: 600;
            }
            .el-icon-phone-outline {
              margin-top: 12px;
            }
          }
          .innerPhone_selet {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 40%;
            margin-left: 10px;
            display: flex;
          }
        }
      }
      .innerBottonGroups {
        width: auto;
        // :nth-child(1) {
        //   margin-bottom: 5px;
        //   background-color: $color-primary;
        // }
        // :nth-child(2) {
        //   background-color: #df8d8d;
        // }
        div {
          border-radius: 5px;
          width: fit-content;
          padding: 3px 10px;
          cursor: pointer;
          color: $color-primary;
        }
      }
    }
    .userRemark {
      width: 100%;
      margin: 10px 0;
      .remarkTitle {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        :nth-child(2) {
          color: $color-primary;
          cursor:pointer;
          padding: 2px 10px;
          border-radius: 5px;
        }
      }
      .beforeWords {
        display: flex;
        div {
          margin: 0 5px;
          color: $color-primary;
          border-bottom: 1px solid $color-primary;
          cursor: pointer;
        }
      }
    }
  }
  .followRecode {

    box-shadow: 1px 0 7px rgba(0, 21, 41, .35);
    padding: 5px;
    width: 29%;
    .titleFo {
      width: 100%;
      font-weight: 600;
    }
    .outSideBox {
      max-height: 60vh;
      overflow-y: scroll;
      .contentFo {
        width: 100%;
        height: auto;
        margin: 10px 0;
        padding: 5px 5px;
        box-shadow: 4px 0 7px rgba(0, 21, 41, .35);
        .timeBox {
        }
        .messageBox {
        }
      }
    }
  }
  .bottomBtns {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    height: 30px;
    line-height: 30px;
    div {
      margin: 0 20px;
    }
  }
}
.el-drawer__header {
  margin-bottom: 0;
}
</style>
